<template>
  <div id="app">

    <div class="layout">
      <div class="layout-left">
        <h5 class="logo">
          <img src="./assets/images/logo.png" alt="">
        </h5>
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">

          <el-menu-item v-for="(item,index) in menuList" :key="index"    :index="item.index" @click="jumpPage(item.link)">
            <i :class="item.icon"></i>
            <span slot="title">{{item.text}}</span>
          </el-menu-item>
          <!-- <el-menu-item index="4" @click="jumpPage('/order')">
            <i class="el-icon-setting"></i>
            <span slot="title">订单管理</span>
          </el-menu-item> -->
        </el-menu>
      </div>
      <div class="layout-right">
        <!-- 占位路由用的-->
        <router-view />
      </div>
    </div>

    
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuList:[
        {
          text:"商品管理",
          link:'/goods',
          icon:"el-icon-menu",
          index:'1'
        },
          {
          text:"订单管理",
          link:'/order',
          icon:"el-icon-s-order",
          index:'2'
        },
          {
          text:"会员管理",
          link:'/menber',
          icon:'el-icon-user',
          index:'3'
        }
      ]
    }
  },
  methods:{
     handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      jumpPage(item){
        this.$router.push({
          path: item
        })
      }
  }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
}


.layout{
   display: flex;
   height: 100%;
  .layout-left{
    width: 220px;
    border: solid 1px red;
    .logo{
      img{
        width: 60px;
        height: 60px;
        display: block;
      }
    }
  }
  .layout-right{
    flex: 1;
    border: solid 1px red;
  }
}

.el-menu{
  height: 100%;
}

.el-menu-item.is-active{
  background-color: #333!important;
}
</style>
